<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、进出岛人员与地域关联统计</div>
<div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    截至目前，统计到的境外人员入岛国家分布情况如下图所示：
</div>
<div id="myecharts18" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图18 境外人员入岛国家分布情况</div>

<div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    截至目前，统计到的省外人员入岛省份分布情况如下图所示：
</div>
<div id="myecharts19" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图19 省外人员入岛省份分布情况</div>

<div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    截至目前，统计到的省内人员出岛市县分布情况如下图所示：
</div>
<div id="myecharts20" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图20 省内人员出岛市县分布情况</div>
<script>
    (function () {

        $(document).ready(function(){
            // 进出岛人员与地域关联统计
            var result18 = [
                { label: "新加坡", count: 1006 },
                { label: "日本", count: 565 },
                { label: "加拿大", count: 4954 },
                { label: "美国", count: 221 }
            ];
            var myecharts18 = echarts.init(document.getElementById("myecharts18"));
            var barXAxisData18 = $.map(${abroadPopulationFlowInto}, function(n, i){ return n.date  });
            var countValues18 = $.map(${abroadPopulationFlowInto}, function(n, i){ return n.count });
            var optionBar18 = getOptionBar(false, barXAxisData18, countValues18, '境外人员入岛情况');
            myecharts18.setOption(optionBar18);

            var result19 = [
                { label: "广东", count: 1006 },
                { label: "广西", count: 565 },
                { label: "湖南", count: 4954 },
                { label: "上海", count: 221 }
            ];
            var myecharts19 = echarts.init(document.getElementById("myecharts19"));
            var barXAxisData19 = $.map(${outIslandPopulationFlowInto}, function(n, i){ return n.date  });
            var countValues19 = $.map(${outIslandPopulationFlowInto}, function(n, i){ return n.count });
            var optionBar19 = getOptionBar(false, barXAxisData19, countValues19, '省外人员入岛情况');
            myecharts19.setOption(optionBar19);

            var result20 = [
                { label: "琼海", count: 1006 },
                { label: "海口", count: 565 },
                { label: "陵水", count: 4954 },
                { label: "三亚", count: 221 }
            ];
            var myecharts20 = echarts.init(document.getElementById("myecharts20"));
            var barXAxisData20 = $.map(${inIslandPopulationFlowInto}, function(n, i){ return n.date  });
            var countValues20 = $.map(${inIslandPopulationFlowInto}, function(n, i){ return n.count });
            var optionBar20 = getOptionBar(false, barXAxisData20, countValues20, '省内人员出岛情况');
            myecharts20.setOption(optionBar20);
        });
        function getOptionBar(isMultipleYAxes, barXAxisData, countValues, title, color) {
            // isMultipleYAxes 是否多y轴
            var series = !isMultipleYAxes? [ { type: "bar", data: countValues } ] : countValues
            var legend = isMultipleYAxes? $.map(countValues, function(n, i){ return n.name; }): []
            var option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: color?color: ['#4b91ff'],
                legend: {
                    right: '4%',
                    data: legend,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: barXAxisData,
                },
                yAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        fontSize: 14,
                        show: true,
                        formatter: function(params) {
                            var result = ''
                            result = params / 10000
                            if (params > 1000) {
                                return result + '万'
                            } else {
                                return params
                            }
                        },
                    },
                },
                series: series
            }
            return option
        }
    })()
</script>